 <template>
  <div class="header" ref="scrollUL" @mousewheel="handleScroll">
    <fheader style="position: absloute; top: 0"></fheader>
    <div style="margin-top: 1px">
      <ul ref="top" :class="isShowtop" v-show="show">
        <li
          v-for="(i, index) in topList"
          :key="index"
          :class="{ active: active === index }"
          @click="switchTab(index)"
          style="cursor: pointer;"
        >
          {{ i }}
        </li>
      </ul>
      <ul class="scroll">
        <li
          class="scrollLi"
          ref="con1"
          style=""
          @mouseenter="titleOver"
          @mouseleave="titleLeave"
        >
          <div v-show="showAbs" class="box" :style="opacityStyle">
            <div class="bg-img"></div>
            <transition
              enter-active-class="animate__animated animate__bounceInLeft"
              leave-active-class="animate__animated animate__bounceOutLeft"
            >
              <div class="title" v-show="showTitle">
                <div style="transform: translate(-50%, -50%)">
                  <div class="title-first">台州温岭</div>
                  <div class="title-second">
                    中国大陆新千年、新世纪第一缕曙光首照地
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </li>
        <li ref="con2" class="scrollLi">
          <div class="center">
            <div style="font-size: 36px; text-align: center">美食</div>
            <ul style="display: flex">
              <li v-for="i in foodList" :key="i.id" style="flex: 1">
                <div class="content">
                  <div>
                    <img
                      style="width: 400px; height: 487px"
                      class="foodimg"
                      :src="i.image"
                    />
                    <div style="text-align: center" class="foodtite">
                      {{ i.title }}
                    </div>
                    <div class="foodtext">
                      {{ i.text }}
                    </div>
                  </div>

                  <!-- <el-divider></el-divider> -->
                  <div>
                    <div></div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li class="scrollLi" ref="con3" style="display: flex">
          <div class="con3Img">
            <div
              style="
                width: 100%;
                height: 100%;
                background: rgb(0, 135, 75);
                opacity: 0.9;
              "
            ></div>
            <div
              style="
                width: 300px;
                height: 300px;
                background: rgb(0, 148, 87);
                position: relative;
                top: -70%;
                left: 50%;
                text-align: center;
              "
            >
              <img
                src="https://tse4-mm.cn.bing.net/th/id/OIP-C.KAffu5aQ2iYFHIo61q7VSgHaEL?w=310&h=180&c=7&r=0&o=5&pid=1.7"
                style="width: 100%"
              />
              <div
                style="
                  background: transparent;
                  font-size: 24px;
                  color: white;
                  margin-top: 10px;
                "
              >
                曙光初现
              </div>
              <div
                style="
                  background: transparent;
                  font-size: 18px;
                  color: white;
                  margin-top: 10px;
                  text-decoration: underline;
                "
              >
                温岭县城全貌
              </div>
            </div>
          </div>
          <ul
            style="
              display: flex;
              flex-wrap: wrap;
              margin-left: 300px;
              margin-top: 100px;
            "
           
          >
            <li v-for="(i, index) in introduceData" :key="index" >
              <div
                style="
                  display: flex;
                  width: 500px;
                  height: 300px;
                  background: white;
                  margin-left: 40px;
                  box-shadow: 3px 3px 12px 8px rgba(0, 0, 0, 0.1);
                  border-radius: 8px;
                "
              >
                <div
                  style="
                    width: 96px;
                    height: 96px; 
                    margin: 15% 50px;
                  "
                >
                <img v-show="i.ishover" :src="i.icon" style="width:100%;">
                <img v-show="i.ishover2" :src="i.iconHover" style="width:100%;">
                </div>
                <div style="margin-top: 50px; flex: 1">
                  <strong>{{i.name}}</strong>
                  <div style="height:80px;margin-top: 20px; margin-bottom: 20px;" v-html="i.text">
                    {{i.text}}
                  </div>
                  <div class="hover"  @mouseover="mouseover(index)"
            @mouseout="mouseout(index)">
                    <strong @click="introduce(index)" style="cursor: pointer;position:;top:20px;" 
                    >更多详情</strong
                  >
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </li>
        <li class="scrollLi" ref="con4">
          <!-- 走马灯 -->
          <el-carousel
            autoplay
            :interval="4000"
            type="card"
            height="500px"
            style="margin: 150px 60px 0 "
          >
            <el-carousel-item v-for="item in lunbotu" :key="item.id">
              <img :src="item.image" alt="" style="width: 100%;border-radius:6px;" />
            </el-carousel-item>
          </el-carousel>
        </li>
        <li ref="con5">
          <Ffooter></Ffooter>
        </li>
      </ul>
    </div>
  </div>
</template>

 <script>
import fheader from "@/components/Header.vue";
import Ffooter from "@/components/footer.vue"
export default {
  data() {
    return {
      show: false,
      showTitle: false,
      isShowtop: ["animate__animated", "animate__bounceIn", "clickClass"],
      titleClass: ["animate__animated", "animate__bounceIn"],
      con1: null,
      con2: null,
      con3: null,
      active: 0,
      showAbs: true,
      opacityStyle: {
        opacity: 1,
      },
      item: [],
      lunbotu: [],
      foodList: [
        {
          id: 0,
          image: require("@/assets/qiangao.jpg"),
          title: "嵌糕",
          text: "温岭嵌糕，土话叫夹糕，是我们温岭独有的传统小吃。把一块年糕用手分两侧按平，再按个人喜好加入有炒面，萝卜丝，土豆丝，猪肉的菜等等，接下来就是把年糕粘起来，做成一个花边，类似饺子的形状，如果最后一步处理不好的话，年糕很容易散开的，再套上个塑料袋，加点猪肉汤，配上一碗咸豆腐生或者绿豆面（一定要加醋），然后汤里放点肉汤，别提有多好吃了！",
        },
        {
          id: 1,
          image: require("@/assets/yougu.png"),
          title: "油鼓",
          text: '油鼓，也是温岭特色小吃之一，其普及程度不亚于温岭嵌糕。其实温岭有个特色，就是南边的人把泡虾和油壶是分开的，但是如坞根，新河，泽国这些的西北的统一称为泡虾，但是泡虾其实不是"虾"，它的原料是小麦粉和各种搭配。小麦粉和水搅拌成稠糊状，用器具取上适当的量，往里加上调味好的肉碎作馅，仍用器具包好，往沸油里一扔，面皮炸至金黄色，用漏勺捞起即可食用，我小时候特别喜欢吃这种硬的油壶，不过现在那个泡虾老婆婆去世了，也很难吃到这么好吃的了！',
        },
        {
          id: 2,
          image:
            "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1111%2F55f13b86j00r2dbnm000rc000dw0099c.jpg&thumbnail=690x10000&quality=75&type=jpg",
          title: "麦古头",
          text: '用鼠曲草(俗称黄花麦果)、苎(麻)叶、菜叶等捣成泥，掺进面粉中揉成青色的面团，再用不到一尺长的短擀面棍擀成一张张直径一尺左右的圆饼，放在锅中烙熟即成麦饼，裹入馅料就成"麦古头"了，馅料和嵌糕的相差无几，一般我家自己做的话会相当丰盛，一般裹入的馅料有:猪肉、鸡蛋碎、黄鱼肉、虾仁、鱼饼、墨鱼卷、螃蟹糕等等，还有各种蔬菜。',
        },
      ],
      introduceData:[
        {
          name:'百年温岭',
          text:'百年温岭大事记(1902-1949年)<br/><br/>百年温岭大事记(1990-1999年)',
          icon:require('@/assets/history.png'),
          iconHover:require('@/assets/historyHouver.png'),
          ishover:true,
          ishover2:false
        },
        {
          name:'温岭名人',
          text:'戴良齐<br/><br/>丁希亮',
          icon:require('@/assets/famous.png'),
          iconHover:require('@/assets/famousHouver.png'),
          ishover:true,
          ishover2:false
        },
        {
          name:'文化遗产',
          text:'温岭非遗体验活动“乐”闹新春<br/><br/>温岭召开大奏鼓保护工作交流会',
          icon:require('@/assets/cultura.png'),
          iconHover:require('@/assets/culturaHover.png'),
          ishover:true,
          ishover2:false
        },
        {
          name:'村史村情',
          text:'太平街道各村历史<br/><br/>城西街道各村历史',
          icon:require('@/assets/village.png'),
          iconHover:require('@/assets/villageHover.png'),
          ishover:true,
          ishover2:false
        },
      ],
      topList: ["美食", "|", "介绍", "|", "美景"],
    };
  },
  mounted() {
    this.con1 = this.$refs["con1"];
    this.con2 = this.$refs["con2"];
    this.con3 = this.$refs["con3"];
    this.con4 = this.$refs["con4"];
    let scrollview = this.$refs["scrollUL"];
    scrollview.addEventListener("scroll", this.handleScroll);
    this.getBanner();
    this.getMarquee();
  },
  // 离开该页面需要移除这个监听的事件
  beforeDestroy() {
    let scrollview = this.$refs["scrollUL"];
    scrollview.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    // 移入
    titleOver() {
      this.showTitle = true;
    },
    // 移出
    titleLeave() {
      this.showTitle = false;
    },
    // 轮播图
    getBanner() {
      this.$api.lunbotu.getLunbotu().then((response) => {
        this.lunbotu = response.data;
      });
    },
    getMarquee() {
      this.$api.home.getIndex().then((response) => {
        this.item = response.data;
      });
    },
    handleScroll(e) {
      const top = document.documentElement.scrollTop;
      // this.$store.commit('scrollToph',top)
      if (top > 800) {
        this.show = true;
        this.isShowtop = [
          "animate__animated",
          "animate__bounceIn",
          "clickClass",
        ];
      } else if (top <= 801) {
        this.isShowtop = [
          "animate__animated",
          "animate__bounceOut",
          "clickClass",
        ];
      } else {
        this.show = false;

        console.log(this.isShowtop);
      }

      //得到滚动的距离
      // const top = document.documentElement.scrollTop
      if (top > 0) {
        //设置一个高度 会随着滚动条变化 高度也会不断地变换
        let opacity = 80 / top;
        //因为opacity的值不能大于1 所以用三目运算符做一个判断
        opacity = opacity > 1 ? 1 : opacity;
        //把获取到的值赋值给opacityStyle 键和值都相等的话 直接写一个就好了
        this.opacityStyle = {
          opacity,
        };
        this.showAbs = true;
      } else if (top <= 0) {
        this.showAbs = true;
        this.opacityStyle = {
          opacity: 1,
        };
      }
    },
    switchTab(index) {
      // 根据当前index切换到对应的页面内容
      console.log(index);
      if (index === 0) {
        this.con2.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
        this.showAbs = true;
        this.opacityStyle = {
          opacity: 1,
        };
      } else if (index === 2) {
        this.con3.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
      } else if (index === 4) {
        this.con4.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
      }
    },
    introduce(i) {
      console.log(i);
      switch (i) {
        case 0:
          this.$router.push({
            name: "historyIntroduce",
          });
          break;
        case 1:
          this.$router.push({
            name: "famous",
          });
          break;
        case 2:
          this.$router.push({
            name: "culturalHeritage",
          });
          break;
        case 3:
          this.$router.push({
            name: "villageHistory",
          });
          break;
      }
    },
    // 介绍温岭移入移出事件
    mouseover(e){
      this.introduceData[e].ishover = false
      this.introduceData[e].ishover2 = true
    },
    mouseout(e){
      this.introduceData[e].ishover = true
      this.introduceData[e].ishover2 = false
    }
  },
  components: {
    fheader,
    Ffooter
  },
};
</script>

 <style lang="scss" scoped>
.box {
  width: 100%;
  height: 960px;
}

.clickClass {
  position: fixed;
  right: 0;
  top: 300px;
  z-index: 2;
  li {
    margin: 40px 0;
    text-align: center;
  }

  div {
    text-align: center;
  }
}

.scroll {
  display: flex;
  flex-direction: column;
  width: 100%;
  .scrollLi {
    height: 960px;

    .con3Img {
      width: 300px;
      height: 960px;
      background: url("../assets/folk.png") no-repeat;
      background-size: 100% 100%;
    }
    .hover{
      transition: all 2s;
    }
    .hover:hover{
      font-size: 30px;
      color: rgb(21, 197, 45);
      transition: all 2s;
    }
  }
}

.center {
  margin: 0 240px;
  padding-top: 50px;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  text-align: center;

  .title-first {
    font-size: 64px;
    margin-bottom: 10px;
  }

  .title-second {
    font-size: 36px;
  }
}

.bg-img {
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("../assets/index.png") no-repeat;
  background-size: 100% 100%;
}

.content {
  position: absolute;
  width: 450px;
  height: 680px;
  margin-top: 80px;
  font-size: 36px;
  background: rgba(246, 230, 223, 0.747);
  .foodimg {
    position: relative;
    top: -50px;
    left: 50%;
    transform: translate(-50%);
  }

  .foodtite {
    position: absolute;
    width: 400px;
    left: 25px;
    bottom: 240px;
    background: rgba(229, 218, 217, 0.5);
    font-size: 30px;
  }

  .foodtext {
    margin: -20px 20px;
    font-size: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
